<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=["/js/service/spot.js","/js/service/protocol.js","/js/service/device.js","/webjars/1.0.0/js/components.js","/js/components.js",
"/js/app/device.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css","/css/index.css"] in base/>
<@base.page "">

    <div class="grid-content bg-purple-light">
        <el-col :span="24" class="content-wrapper">
            <section>
                ffff
                <el-col :span="24">
                    <div :style="treeStyle">
                        <tree-spot-device @node_click="getTreeSelectedVal" v-bind:is-load-device="false" @get_children_spots="getTreeChildren" v-model="treeData" @collapse="collapse"></tree-spot-device>
                    </div>
                    <div :style="tableStyle">
                        <el-col :span="24" class="toolbar">
                            <el-row>
                                <el-button type="success" plain size="small" icon="el-icon-plus" @click="add(loadList)">添加</el-button>
                            </el-row>
                            <el-form :inline="true" :model="searchVm">
                                <el-form-item label="">
                                    <el-input style="width:150px;" v-model="searchVm.name" clearable placeholder="设备名称"></el-input>
                                    <el-input style="width:150px;" v-model="searchVm.deviceCode" clearable placeholder="通信识别码"></el-input>
                                    <el-select v-model="searchVm.protocolType" clearable placeholder="类型">
                                        <el-option label="snmp" value="snmp"></el-option>
                                        <el-option label="捷宸" value="捷宸"></el-option>
                                        <el-option label="虚拟设备" value="虚拟设备"></el-option>
                                        <el-option label="RePing" value="RePing"></el-option>
                                    </el-select>
                                    <el-input style="width:150px;" v-model="searchVm.netName" clearable placeholder="网关"></el-input>
                                    <el-input style="width:150px;" v-model="searchVm.protocolName" clearable placeholder="Mib库"></el-input>
                                </el-form-item>
                                <@but.search "search()" ":loading='tableVm.loading'"/>
                                </el-form>
                        </el-col>
                        <!--表格-->
                        <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%" v-loading="tableVm.loading">
                            <el-table-column prop="name" label="设备名称"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="deviceCode" label="通信识别码"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="spotName" label="所属站点"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="protocolType" label="类型"  min-width="100" show-overflow-tooltip :formatter="formatter"></el-table-column>
                            <el-table-column prop="netName" label="网关"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="protocolName" label="Mib库"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column label="操作" min-width="300">
                                <template scope="scope">
                                    <@tabt.show "show(scope.$index,scope.row,fillData)" />
                                    <@tabt.edit "edit(scope.$index,scope.row,fillData)" />
                                    <@tabt.delete "deleteRow(scope.$index,scope.row)" />
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination  @current-change="handleCurrentChange" :current-page="tableVm.pageIndex" :page-size="tableVm.pageSize" layout="prev, pager, next, jumper" :total="tableVm.total"></el-pagination>
                        </div>
                        <!--编辑界面-->
                        <el-dialog :title="editVm.oprate" :visible.sync="editVm.visible" width="900px">
                            <el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules" ref="editForm">
                                <el-row>
                                    <el-form-item label="设备名称" prop="name">
                                        <el-input v-model="editVm.data.name" :disabled="!editVm.isEdit" maxlength="20"></el-input>
                                    </el-form-item>
                                    <el-form-item label="所属站点" prop="spotId">
                                        <el-select v-model="editVm.data.spotId" :disabled="!editVm.isEdit" clearable style="width:100%;" filterable>
                                            <el-option
                                                    v-for="item in spotList"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="deviceCode">
                                        <span slot="label">
                                            通信识别码
                                            <el-tooltip placement="top">
                                                <div slot="content">
                                                    若设备是RePing类型，请输入监测网络的IP或域名
                                                    <br/>
                                                    若网关存在ID，请在输入时带上ID值，格式：网关ID_通信识别码。示例：23_127.0.0.1:10001
                                                </div>
                                                <i class="el-icon-question"></i>
                                            </el-tooltip>
                                       </span>
                                        <el-input v-model="editVm.data.deviceCode" :disabled="!editVm.isEdit" maxlength="50"></el-input>
                                    </el-form-item>
                                    <el-form-item label="标识" prop="flag">
                                        <el-input v-model="editVm.data.flag" :disabled="!editVm.isEdit" maxlength="20" clearable></el-input>
                                    </el-form-item>

                                    <el-form-item label="类型" prop="type">
                                        <el-select v-model="editVm.data.type" :disabled="!editVm.isEdit" style="width:100%;" @change="changType()">
                                            <el-option label="snmp" value="snmp"></el-option>
                                            <el-option label="捷宸" value="捷宸"></el-option>
                                            <el-option label="虚拟设备" value="虚拟设备"></el-option>
                                            <el-option label="RePing" value="RePing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="协议名" prop="protocolId" v-if="editVm.data.type==='捷宸' || editVm.data.type==='RePing' " ref="deal">
                                        <el-select v-model="editVm.data.protocolId" :disabled="!editVm.isEdit" clearable style="width:100%;"  >
                                            <el-option
                                                    v-for="item in protocolList"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="Mib库" prop="protocolId" v-if="editVm.data.type==='snmp'" ref="mib">
                                        <el-select v-model="editVm.data.protocolId" :disabled="!editVm.isEdit" clearable style="width:100%;">
                                            <el-option
                                                    v-for="item in protocolList"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="是否发送trap" v-if="editVm.data.type==='snmp'">
                                        <el-select v-model="editVm.data.sendtrap" :disabled="!editVm.isEdit" style="width:100%;">
                                            <el-option
                                                    v-for="item in upDataList"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="" v-if="editVm.data.type==='虚拟设备'">
                                        <span style="color:red;">自定义设备，将自定义算法的虚拟通道绑定在该设备上</span>
                                    </el-form-item>
                                    <el-form-item label="上传设置" prop="sendType">
                                        <el-select v-model="editVm.data.sendType" :disabled="!editVm.isEdit" clearable style="width:100%;">
                                            <el-option
                                                    v-for="item in sendTypeList"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item ref="timeout" class="is-no-asterisk">
                                        <div slot="label">
                                            <el-checkbox v-model="editVm.data.channelTimeout" :disabled="!editVm.isEdit">通信超时报警</el-checkbox>
                                        </div>
                                        <el-input v-model="editVm.data.timeout" :disabled="!editVm.isEdit" style="width: 200px;" clearable
                                                  onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="5">
                                            <template slot="append">min</template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="备注">
                                        <el-input type="textarea" v-model="editVm.data.remark"  :disabled="!editVm.isEdit" maxlength="50"></el-input>
                                    </el-form-item>

                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <@but.back "editVm.visible = false" />
                                <@but.save "save(editVm,null,buildSaveObj)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
                            </div>
                        </el-dialog>
                    </div>
                </el-col>
            </section>
        </el-col>
    </div>

</@base.page>
